@extends('layouts.app')

@section('content')
<div class="MaskZpai"></div>
<div id="example-2" class="card-box" style="display: none;">
	<div v-if="pageshow==0?true:false">
		<!--头部-->
		<div class="card-header">
			<a href="{{ url('/home') }}"><i class="iconfont icon-lineleft left"></i></a>
			<div class="dropdown">
			  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
			    	{{ $option->name }}
			    <span class="caret"></span>
			  </button>
			  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                @foreach($otherOptions as $other)
			    <li role="presentation"><a role="menuitem" tabindex="-1" href="{{ url('/option',['symbol'=>$other->code]) }}">{{ $other->name }}</a></li>
			    @endforeach
                <!-- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">黄金</a></li>
			    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">欧元</a></li>
			    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">比特币</a></li> -->
			  </ul>
			</div>
			<a class="right" href="{{ url('/rules',['symbol'=>$option->code]) }}">玩法</a>
		</div>
		<!--余额-->
		<div class="card-mony clearfix">
			<span class="left"><span class="balance">@{{ monybalance }}</span>(余额)</span>
			<a href="{{ url('/recharge') }}"><span class="right"><i class="iconfont icon-chongzhi left"></i>充值</span></a>
		</div>
		<!--k线图-->
		<div class="card-svg">
			<div class="card-svgnav">
				<span v-on:click="svgshow=0" v-bind:class="{ active: svgshow==0?true:false }">分时图</span>
				<span v-on:click="svgshow=1" v-bind:class="{ active: svgshow==1?true:false }">日线图</span>
				<span v-on:click="lightning" v-bind:class="{ active: svgshow==2?true:false }">闪电</span>
				<span v-on:click="svgshow=3" v-bind:class="{ active: svgshow==3?true:false }">盘口</span>
			</div>
			<div class="card-svgbox">
				<article v-bind:style="{ height: activeheight+'px', width: widthSize + 'px' }" v-if="svgshow==0?true:false">
					<svg :style="{ 'width': vbox[0], 'height': vbox[1] }">
				        <polygraph :stats="svgstats"></polygraph>
				    </svg>
				</article>
				<article v-bind:style="{ height: activeheight+'px', width: widthSize + 'px' }" v-if="svgshow==1?true:false">
					<svg :style="{ 'width': vbox[0], 'height': vbox[1] }">
				        <polygratu :stats="lzstats"></polygratu>
				    </svg>
				</article>
				<article v-bind:style="{ height: activeheight+'px', width: widthSize + 'px' }" v-if="svgshow==2?true:false">
					<svg :style="{ 'width': vbox[0], 'height': vbox[1] }">
				        <polygratgg :stats="sdstats"></polygratgg>
				    </svg>
				</article>
				<article v-bind:style="{ height: activeheight+'px', width: widthSize + 'px' }" v-if="svgshow==3?true:false">
					<div class="card-pad">
						<div class="card-padli">
							<span>最高</span>
							<span class="card-red">@{{dianshu[15]}}</span>
						</div>
						<div class="card-padli">
							<span>最低</span>
							<span class="card-grr">@{{dianshu[16]}}</span>
						</div>						
					</div>
					<div class="card-pad">
						<div class="card-padli">
							<span>开盘</span>
							<span class="card-red">@{{dianshu[14]}}</span>
						</div>
						<div class="card-padli">
							<span>昨收</span>
							<span class="card-grr">@{{dianshu[17]}}</span>
						</div>						
					</div>
					<div class="card-pad">
						<div class="card-padli">
							<span>今结</span>
							<span class="card-red">@{{dianshu[12]}}</span>
						</div>
						<div class="card-padli">
							<span>昨结</span>
							<span class="card-grr">@{{dianshu[13]}}</span>
						</div>						
					</div>
					<div class="card-pad">
						<div class="card-padli">
							<span>总手</span>
							<span class="card-red">@{{dianshu[11]}}</span>
						</div>					
					</div>
				</article>
			</div>
		</div>
		<div class="card-svg" style="height: 100px;">
			
			
			
		</div>
		<!--title-->
		<div class="card-footer">
			<!--合约名-->
			<div class="card-title clearfix">
				<span class="left">{{ $option->name }}<i>&nbsp;&nbsp;{{ $option->code }}</i></span>
                @if(!empty($endDateTime))
				<span class="right red"><i>本时段持仓时间至&nbsp;&nbsp;</i>{{ $endDateTime }}</span>
                @else
                <span class="right red"><i>本时段持&nbsp;&nbsp;</i>休市</span>
                @endif
			</div>
			<!--合约点数-->
			<div class="card-ponits">
				<div v-bind:class="[dianshu[7]? 'card-red' : 'card-grr', 'card-point1']">
					<p class="card-poiy1">@{{dianshu[0]}}</p>
					<p class="card-poiy2">
						<span>@{{dianshu[1]}}</span>
						<span>@{{dianshu[2]}}</span>
					</p>
				</div>
				<div class="card-point2">
					<p class="card-em clearfix"><span class="red number">@{{dianshu[4]}}</span><span>买量</span><i class="bgr" v-bind:style="{ width:dianshu[3]>80?80:dianshu[3]+'px'}"></i></p>
					<p class="card-em clearfix"><span class="red number">@{{dianshu[6]}}</span><span>卖量</span><i class="bgg" v-bind:style="{ width:dianshu[5]>80?80:dianshu[5]+'px'}"></i></p>
				</div>
			</div>
			<!--切换-->
			<div class="card-switch">
				<div class="card-switch1" v-on:click="say(1)">持仓<span v-show="holdarr[4]>0?true:false">@{{holdarr[4]}}</span></div>
				<div class="card-switch3" v-on:click="say(2)">结算</div>
				<div class="card-switch2 bgr" v-on:click="say(3,1)">买涨(@{{dianshu[8]}})</div>
				<div class="card-switch2 bgg" v-on:click="say(3,0)">买跌(@{{dianshu[9]}})</div>
			</div>
		</div>
	</div>
	<!--持仓-->
	<div v-if="pageshow==1?true:false">
		<!--头部-->
		<div class="card-header">
			<i v-on:click="say(0)" class="iconfont icon-lineleft left"></i>
			<div class="dropdown">
			  持仓
			</div>
			<a class="right" href="{{ url('/rules',['symbol'=>$option->code]) }}">玩法</a>
		</div>
		<div class="card-hold">
			<div class="card-holdtitle clearfix">
				<p class="card-holdtitlep1">持仓总收益</p>
				<p v-bind:class="{ 'card-holdtitlep2':true,'card-red':holdarr[2]=='0'?true:false,'card-grr':holdarr[2]=='0'?false:true}">@{{(holdarr[1]).toFixed(points)}}<span>(@{{(holdarr[1]*exchange_rate).toFixed(points)}})元</span></p>
				<span class="card-holdremove">
					<button v-on:click="cardholdone">一键平仓</button>
				</span>
			</div>
			<div class="card-holdli" v-for='(tims,i) in holdarr[0]'>
				<p class="clearfix">
					<span v-bind:class="{ 'left':true,'card-red':tims[0]=='买涨'?true:false,'card-grr':tims[0]=='买涨'?false:true}">@{{tims[0]}}</span>
					<span v-bind:class="{ 'right':true,'card-red':tims[5]>0?true:false,'card-grr':tims[5]>0?false:true}">@{{(tims[5]).toFixed(points)}}(@{{currency_unit}})</span>
				</p>
				<div class="card-holdliconter">
					<div class="card-holdlip2">
						<span class="mg">止盈&nbsp;@{{tims[2]}} @{{currency_unit}}</span>
						<span>止损&nbsp;@{{tims[1]}} @{{currency_unit}}</span>
					</div>
					<div class="card-holdlip2">
						<span class="mg">买入&nbsp;@{{tims[3]}}</span>
						<span>现价&nbsp;@{{dianshu[0]}}</span>
					</div>
					<div class="card-holdlip1">
						<button class="right button1" v-on:click="cardholdclick(tims[6],i)">平仓</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--结算-->
	<div v-if="pageshow==2?true:false">
		<!--头部-->
		<div class="card-header">
			<i v-on:click="say(0)" class="iconfont icon-lineleft left"></i>
			<div class="dropdown">
			  结算
			</div>
			<a class="right" href="{{ url('/rules',['symbol'=>$other->code]) }}">玩法</a>
		</div>
		<div class="card-holdli" v-for='(tims,i) in settlement'>
			<p class="clearfix">
				<span v-bind:class="{ 'left':true,'card-red':tims.direction=='1'?true:false,'card-grr':tims.direction=='1'?false:true}">@{{tims.direction=='0'?'买跌':'买涨'}}</span>
				<span v-bind:class="{ 'right':true,'card-red':parseFloat(tims.profit)>0?true:false,'card-grr':parseFloat(tims.profit)>0?false:true}">@{{tims.profit}}(¥)</span>
			</p>
			<div class="card-holdliconter">
				<div class="card-holdlip1">
					<span class="mg colorr">止盈@{{tims.surplus_value}}@{{currency_unit}}</span>
					<span class="colorr">止损@{{tims.stop_loss_value}}@{{currency_unit}}</span>
				</div>
				<div class="card-holdlip1">
					<span class="mg colorr">买入@{{tims.buy_point}}</span>
					<span class="colorr">结算@{{tims.close_point}}</span>
				</div>
				<div class="card-holdlip1">
					<button class="right button2">结算成功</button>
				</div>
			</div>
			<div class="botot">@{{tims.close_time}}</div>
		</div>
		<p class="card-moremore" v-on:click="moremore">加载更多</p>
	</div>
	<div v-if="pageshow==3?true:false">
		<!--头部-->
		<div class="card-header">
			<i v-on:click="say(0)" class="iconfont icon-lineleft left"></i>
			<div class="dropdown">
			  买入委托
			</div>
			<a class="right" href="{{ url('/rules',['symbol'=>$other->code]) }}">玩法</a>
		</div>
		<!--交易清单-->
		<div class="card-list">
			<div class="card-listlip clearfix">
				<span class="span1"><i>{{ $option->name }}</i>&nbsp;{{ $option->code }}</span>
				<span class="span2 spanrem">持仓至{{ $endDateTime }}自动平仓</span>
			</div>
			<div class="card-listlip clearfix">
				<div class="span1">交易数量</div>
				<div class="span2"  >
					<div class="borderbox clearfix">
						<span v-for='(ol,i) in stats.list'  v-on:click="clickp(i)"   v-bind:class="{'card-pp':stats.i==i?false:true,'card-px':stats.i==i?true:false}">@{{ol}}手</span>
					</div>
				</div>
			</div>
			<div class="card-listlip clearfix">
				<span class="span1">触发止盈</span>
				<span class="span2"><i>@{{currency_unit}}@{{surplus_value}}</i>(￥@{{surplus_valuex}})</span>
			</div>
			<div class="card-listlip clearfix">
				<span class="span1">触发止损</span>
				<div class="span2">
					<div class="borderbox clearfix">
						<span v-for='(ol,i) in statx.list' v-on:click="clickx(i)" v-show="(i>(statx.i-2)&& i<(statx.i+2)) ? true :false" v-bind:class="{'card-pp':statx.i==i?false:true,'card-px':statx.i==i?true:false}">@{{currency_unit}}@{{ol}}</span>
					</div>
					<i class="iconfont icon-1" v-on:click="tanchu(1)"></i>
				</div>
			</div>
			<div class="card-listlip clearfix">
				<span class="span1">止损保证金</span>
				<span class="span2">@{{currency_unit}}@{{stop_loss_margin}}(￥@{{stop_loss_marginx}})</span>
			</div>
			<div class="card-listlip clearfix card-listnone">
				<span class="span1">交易综合费</span>
				<span class="span2">@{{currency_unit}}@{{transaction_cost}}(￥@{{transaction_costx}})</span>
			</div>
		</div>
		<div class="card-currencies">
			<p>汇率换算：1{{ $option->currency_name }} = {{ $option->exchange_rate }}人民币</p>
		</div>
		<div class="card-listlip clearfix card-listtop">
			<span class="span1">合计支付</span>
			<span class="span2">@{{currency_unit}}@{{transaction_heji}}(￥@{{transaction_hejix}})</span>
		</div>
		<div class="card-bottomfiex">
			<span class="card-bottomf">最新买入价@{{dianshu[10]}}</span>
			<span class="bgg" v-on:click='buy' v-bind:class="[ tanchushow==0 ?'bgg':'bgr' ]">确定@{{ tanchushow==0?'买跌':'买涨'}}</span>
		</div>
	</div>
    <!--提示消息-->
	<modal v-if="showModal" @close="showModal = false">
		<h3 slot="header">@{{showModaltitle}}</h3>
		<div slot="body">@{{showModalbody}}</div>
	</modal>
	<!--弹出-->
	<div class="modal-mask" v-if='tanchubox'>
      <div class="modal-wrapper">
        <div class="modal-container">
        	<li class="model-li" v-for='(mi,i) in tanchuarr' v-on:click="tanchure(i)">@{{mi}}</li>
        </div>
      </div>
    </div>
</div>
<!--分时图 组件-->
@section('footer')

@endsection

<script type="text/x-template" id="polygraph-template">
  <g>
    <line v-for="item in pois['us']" :x1='item[0]' :x2='item[1]' :y1='item[2]' :y2='item[3]' stroke="#f8f8f8"></line>
    <line v-for="itxm in pois['time']" :x1='itxm[0]' :x2='itxm[1]' :y1='itxm[2]' :y2='itxm[3]' stroke="#f8f8f8"></line>
    <text v-for="itxm in pois['time']" :x="itxm[5]" :y="itxm[6]" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>@{{itxm[4]}}</tspan></text>
  	<path stroke="none" fill="#3083ca" fill-opacity="0.2" :d="pois['path'][0]"></path>
  	<path stroke="#3083ca" fill="none" fill-opacity="0.2" :d="pois['path'][1]"></path>
  	<circle class='anmiet' :cx="pois['circle'][0][0]" :cy="pois['circle'][0][1]" r="3" fill="#fff" fill-opacity="0.2" stroke="#f05a3c" stroke-width="0.5"></circle>
  	<circle class='anmiet' :cx="pois['circle'][1][0]" :cy="pois['circle'][1][1]" r="2" fill="#f05a3c" stroke-width="0"></circle>
  	<text v-for="itxm in pois['main']" :x="itxm[0]" :y="itxm[1]" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>@{{itxm[2]}}</tspan></text>
  	<line :x1='pois['linered'][0]' :x2='pois['linered'][1]' :y1='pois['linered'][2]' :y2='pois['linered'][3]' stroke="red" stroke-dasharray="3,3"></line>
  </g>
</script>

<!--蜡烛图-->
<script type="text/x-template" id="polygraph-temprate">
  <g>
    <line v-for="item in pois['us']" :x1='item[0]' :x2='item[1]' :y1='item[2]' :y2='item[3]' stroke="#f8f8f8"></line>
    <line v-for="itxm in pois['timeline']" :x1='itxm[0]' :x2='itxm[1]' :y1='itxm[2]' :y2='itxm[3]' stroke="#f8f8f8"></line>
    <text v-for="itxm in pois['timetext']" :x="itxm[0]" :y="itxm[1]" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>@{{itxm[2]}}</tspan></text>
  	<text v-for="itxm in pois['main']" :x="itxm[0]" :y="itxm[1]" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>@{{itxm[2]}}</tspan></text>
  	<line v-for="itxm in pois['linered']" :x1='itxm[0][0]' :x2='itxm[0][1]' :y1='itxm[0][2]' :y2='itxm[0][3]' :stroke="itxm[1]?'#db4c3c':'#7f8da9'"></line>
  	<path v-for="itxm in pois['path']" :stroke="itxm[1]?'#db4c3c':'#32a910'" :fill="itxm[1]?'#db4c3c':'#32a910'" fill-opacity="1" :d="itxm[0]"></path>
  	<line v-for="itxm in pois['make']" :x1='itxm[0][0]' :x2='itxm[0][1]' :y1='itxm[0][2]' :y2='itxm[0][3]' :stroke="itxm[1]?'#db4c3c':'#32a910'" :stroke-width='itxm[2]-2'></line>
  </g>
</script>
<!--闪电-->
<script type="text/x-template" id="polygraph-tem">
  <g>
    <line v-for="item in pois['mathline']" :x1='item[0]' :x2='item[1]' :y1='item[2]' :y2='item[3]' stroke="#f8f8f8"></line>
    <text v-for="itxm in pois['mathtext']" :x="itxm[0]" :y="itxm[1]" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>@{{itxm[2]}}</tspan></text>
  	<path  stroke="#2f84cc" fill="none" :d="pois['dpath']"></path>
  	<rect :x="pois['test'][0]-5" :y="pois['test'][1]-10" rx="3" ry="3" width="50" height="14" fill="#2f84cc" stroke="#2f84cc"></rect>
	<text :x="pois['test'][0]" :y="pois['test'][1]" fill="#fff" style="text-anchor: start;font-size:8pt;"><tspan>@{{pois['test'][2]}}</tspan></text>
	<circle class='anmiet' :cx="pois['circle'][0]+1" :cy="pois['circle'][1]" r="3" fill="#fff" fill-opacity="0.2" stroke="#f05a3c" stroke-width="0.5"></circle>
  	<circle class='anmiet' :cx="pois['circle'][0]+1" :cy="pois['circle'][1]" r="2" fill="#f05a3c" stroke-width="0"></circle>
  </g>
</script>

<!--弹出 组件-->
<script type="text/x-template" id="modal-template">
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-header">
            <slot name="header">
              default header
            </slot>
          </div>

          <div class="modal-body">
            <slot name="body">
              default body
            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              <button class="modal-default-button" @click="$emit('close')">
              	确认
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</script>
<script type="text/javascript">
	var urltime="{{ url('getdata',['symbol'=>$option->code]) }}";//点数url
	var urlgt="{{ url('/order/insert') }}";//下单url
	var urls="{{ url('getperioddata',['symbol'=>$option->code]) }}";//分时url
	var _token = "{{ csrf_token() }}";
	//var nowx={list:[1,2,3,5,10,11,50],show:false,i:1};//list手数  i当前显示选中手数
    var nowx={list:[{{ $option->hand_count }}],show:false,i:1};//list手数  i当前显示选中手数
	var nos={list:[{{ $option->stop_loss_value }}],liss:[{{ $option->surplus_value }}],lise:[{{ $option->stop_loss_margin }}],show:false,i:1} //list 止损列表  liss止损对应止盈 lise止损保证金  i当前显示选中的止损
    //var nos={list:[1200,100,800,900,1000],liss:[1200,100,800,900,1000],lise:[1400,200,600,1000,1200],show:false,i:1} //list 止损列表  liss止损对应止盈 lise止损保证金  i当前显示选中的止损
	//var exchange_rate=8.29;//汇率
    var exchange_rate={{ $option->exchange_rate }};//汇率
	var currency_unit="{{ $option->currency_unit }}";//汇率单位
	var transaction_cost={{ $option->transaction_cost }};//交易综合费
	//timetest 时间间隔数组, timelang 总时间长度  按分钟算
    var timetest={!! $newtimes !!},timelang=0;
    var option_id = {{ $option->id }};//ID
    var fluctuation={{ $option->fluctuation }};//最小波动
    var fluctuation_price={{ $option->fluctuation_price }};//最小波动价格
    var balance={{ $user->balance }};//余额
    var positionurl = "{{ url('/order/position',['option_id'=>$option->id]) }}";//持仓
    var settlementurl = "{{ url('/order/settlement',['option_id'=>$option->id]) }}";//结算
    var unwindorderurl = "{{ url('/order/unwindorder') }}";//平仓
    var unwindorderallurl = "{{ url('/order/unwindorderall') }}";//平仓 - 传递option_id
    var datekurl = "{{ url('/getklinedata',['symbol'=>$option->code,'time'=>1,'return_t'=>0]) }}";//日线
    var datetime="{{ $endDateTime }}";
//  console.log(fluctuation)
    
</script>
<script src="{{ asset('javascript/card.js') }}"></script>
@endsection
